<template>
  <el-container style="height: 100vh;overflow: hidden">
    <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)"
        >人机增强多智能体量化评估与演化</span
      >
      <div class="nav-tab">
        <el-tabs
          style="color: rgb(245, 245, 245)"
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="模型" name="first"></el-tab-pane>
          <el-tab-pane label="性能" name="second"></el-tab-pane>
          <el-tab-pane label="效果" name="third"></el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main style="background-color: rgb(33, 108, 157);">
      <el-row>
        <el-col :span="24">
          <!-- 模型、性能、效果部分 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-button type="primary" @click="handleCalculate">算例   </el-button>
              <el-button type="primary" style="margin-left:30px;" @click="handleAgent">智能体   </el-button>
            </div>
          </el-card>
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="6">
          <!-- 功能模块选择 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>功能模块选择</span>
            </div>
            <el-select v-model="functionalModule" placeholder="请选择">
              <el-option
                v-for="item in functionalModules"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据分析</span>
            </div>
            <el-select v-model="analysisArea">
              <el-option
                v-for="item in analysisAreas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        <el-col :span="3">
           <div style="display: inline-block; float: right;">
            <el-button type="primary" @click="dataSubmit">数据提交</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="display: inline-block; float: right;">
            <el-button type="primary">算例导入</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="display: inline-block; float: right;">
            <el-button type="primary"> 算例导出</el-button>
          </div>
        </el-col>
        <el-col :span="3" style="::v-deep background-color:rgb(33,108,157)">
          <div class="analysis-button">
            <div slot="header" class="clearfix">
              <span> </span>
            </div>
            <el-button
              type="primary"
              @click="simulateAndVerify"
              style="float: right"
              >算例仿真校验</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 图片展示区域 -->
          <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
              <span>图片展示区域</span>
            </div> -->
            <!-- 这里可以添加图表组件 -->
            <div class="demo-image">
              <div v-for="fit in fits" :key="fit" class="block">
                <!-- <span class="demonstration">{{ fit }}</span> -->
                <el-image
                   style="width: 500px; height: 285px" 
                  :src="url"
                  :fit="fit"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- table展示区域 -->
          <el-card class="box-card">
            <!-- <div slot="header" class="clearfix">
              <span>数据表格展示区</span>
            </div> -->
            <!-- 这里可以添加表格组件 -->
            <div >
                <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="348">
                    <el-table-column prop="name" label="名称" width="180" />
                    <el-table-column prop="from_junction" label="连接点" width="180" />

                    <el-table-column prop="basic_param" label="基础参数" />
                </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>  
  
<script lang="ts" setup>
import { computed, defineComponent, ref,watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import {useRouter} from 'vue-router'
import {BASE_URL} from '@/utils/common.js'

const router = useRouter();

function handleCalculate(){
 // console.log("handleCalculate");
   router.push("/tj-model")
}

function handleAgent(){
  router.push("/agent")
}

const functionalModule = ref("");
const performanceIndicator = ref("");
const analysisArea = ref("");
// 下拉框初始化完毕
// 下拉框赋值
const functionalModules = ref([
  {value:"",label:"请选择"},  
  { value: "microgrid", label: "微网群" },
  { value: "integrated_energy", label: "综合能源" },
  { value: "distributed_grid", label: "分布式协同电网" },
  // ... 其他功能模块
]);

const performanceIndicators = ref([
  { value: "import", label: "导入" },
  { value: "export", label: "导出" },
  { value: "modify", label: "修改" },
  // ... 其他性能指标
]);

const analysisAreas = ref([
  // { value: "partition", label: "分区" },
  // { value: "analysis", label: "源荷特征挖掘" },
]);

const selectedFunctionalModule = computed(()=>{
    return functionalModules.value.find(item => item.value === functionalModule.value);
});

const selectedAnalysisArea = computed(()=>{
  var selectedItem = analysisAreas.value.find(item=>item.value ===analysisArea.value)
  //console.log("第二个选择框当前的值是::"+selectedItem);
  return selectedItem
})

watch(functionalModule,(newVal,oldVal)=>{
   console.log("param1是::"+newVal);
   if(newVal === "distributed_grid"){
      analysisAreas.value=[
        {value:"",label:"请选择"},
        { value: "partition", label: "分区" },
        { value: "analysis", label: "源荷特性分析" },
      ]
   }else{
     analysisAreas.value=[]
     analysisArea.value = ''
   }
})

watch(analysisArea,(newVal,oldVal)=>{
   console.log("第二个选择框当前的值是::"+newVal);
})

const dataSubmit = async ()=>{
   const formData = new FormData();
   formData.append('functionModule',selectedFunctionalModule.value.label);
   
   if(selectedAnalysisArea.value ){
     console.log("点提交时，选择框二的值是：："+selectedAnalysisArea.value.label)
     formData.append('analysis',selectedAnalysisArea.value.label);
   }
   //console.log("选择的值是::"+selectedFunctionalModule.value.label);
   try{
     const response = await axios.post(BASE_URL+'/getWeiwangqun', formData, {  
          headers: {  
          	'Content-Type': 'application/json', 		
          },  
        });  
        console.log(response.data);
        tableData.value = response.data;
        if(selectedFunctionalModule.value.label=="微网群"){
          url.value = BASE_URL+"/getWeiwangImg"; 
          
        }else if(selectedFunctionalModule.value.label=="综合能源"){
          url.value = BASE_URL+"/getEnergyImg"; 
        }else if(selectedFunctionalModule.value.label=="分布式协同电网"){
           if(selectedAnalysisArea.value){
                console.log("分网出错::"+selectedAnalysisArea.value.label);
              if(selectedAnalysisArea.value.label==="分区"){
                url.value =BASE_URL+"/getCollaborateArea";
              }  
              if(selectedAnalysisArea.value.label==="源荷特性分析"){
                 url.value =BASE_URL+"/getCollaborateLoad"
              } 
           }else{
             url.value = BASE_URL+"/getCollaborateImg"; 
           }
        }
        
        
   }catch(error){
     console.error(error); 
   }
   
}

function simulateAndVerify() {}

//图片js
const fits = [
  'fill'
 
] as ImageProps['fit'][]
const url = ref(BASE_URL+"/getEmptyImg")
 // 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'


//表格
  const tableData = ref([]);

</script>  
  
<style scoped lang="scss">
analysis-button {
  background-color: rgb(33, 108, 157);
}

::v-deep .el-tabs__item {
  color: rgb(245, 245, 245);
}

.box-card {
  margin-bottom: 20px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
}
/* 其他样式 */
.custom-header {
  background-color: rgb(26, 68, 94);
  padding-top: 15px;
}

.nav-tab {
  display: inline-block; /* 使 div 表现得像行内块级元素 */
  float: right; /* 使其右浮动 */
  color: rgb(245, 245, 245);
}

/*图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>